<template>
  <div>
    <div class="now_page_title">
      <div class="left_box">
        <svg-icon :icon-class="routerInfo.meta.icon"></svg-icon>
        <span class="metaTitle">{{ routerInfo.meta.title }}</span>
        <div class="breadcrumb_boxs">
          <div v-for="(item, index) in breadList" :key="item.id">
            <div v-if="breadList.length < 4" :class="{ text_color: index == breadList.length - 1 }">
              <span class="icon_class">/</span>
              <el-tooltip class="item" effect="dark" :content="item.label" placement="top">
                <span class="breadcrumb_box_item" @click="breadRouterClick(item)">{{ item.label }}</span>
              </el-tooltip>
            </div>
            <div v-else :class="{ text_color: index == breadList.length - 1 }">
              <div v-if="index == 0">
                <span class="icon_class">/</span>
                <el-tooltip class="item" effect="dark" :content="item.label" placement="top">
                  <span class="breadcrumb_box_item" @click="breadRouterClick(item)">{{ item.label }}</span>
                </el-tooltip>
              </div>
              <div v-if="index >= breadList.length - 2">
                <span v-if="index == breadList.length - 2" class="icon_class">/ &nbsp; ... &nbsp;/</span>
                <span v-if="index == breadList.length - 1" class="icon_class">/</span>
                <el-tooltip class="item" effect="dark" :content="item.label" placement="top">
                  <span class="breadcrumb_box_item" @click="breadRouterClick(item)">{{ item.label }}</span>
                </el-tooltip>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="btn_box" v-if="isShowAdd">
        <div class="create_box">
          <el-dropdown trigger="click" @command="createCommand">
            <el-button :disabled="isAddDisabled">
              <!-- <i class="el-icon-plus"></i> -->
              <span class="create_text">上传</span>
              <i class="el-icon-caret-bottom"></i>
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item class="create_row" command="file">
                <svg-icon icon-class="uploadFile" />
                <span class="metaTitle">上传文件</span>
              </el-dropdown-item>
              <el-dropdown-item v-if="pageType != 'enterprise'" class="create_row" command="folder">
                <svg-icon icon-class="floder" />
                <span class="metaTitle">上传文件夹</span>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
        <div class="create_box" v-if="isShowAdd">
          <el-dropdown trigger="click" @command="createCommand">
            <el-button type="primary" :disabled="isAddDisabled">
              <!-- <i class="el-icon-plus"></i> -->
              <span class="create_text">新建</span>
              <i class="el-icon-caret-bottom"></i>
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item class="create_row" command="newFolder">
                <svg-icon icon-class="add"></svg-icon>
                <span class="metaTitle">新建文件夹</span>
              </el-dropdown-item>
              <el-dropdown-item class="create_row create_row_bottom" command="word" v-if="pageType != 'enterprise'">
                <svg-icon icon-class="Word"></svg-icon>
                <span class="metaTitle">新建word</span>
              </el-dropdown-item>
              <el-dropdown-item class="create_row" command="excel" v-if="pageType != 'enterprise'">
                <svg-icon icon-class="Excel"></svg-icon>
                <span class="metaTitle">新建excel</span>
              </el-dropdown-item>
              <el-dropdown-item class="create_row" command="ppt" v-if="pageType != 'enterprise'">
                <svg-icon icon-class="PPT"></svg-icon>
                <span class="metaTitle">新建ppt</span>
              </el-dropdown-item>
              <el-dropdown-item class="create_row" command="formDocument" v-if="pageType != 'enterprise'">
                <svg-icon icon-class="txt"></svg-icon>
                <span class="metaTitle">新建表单</span>
              </el-dropdown-item>

              <el-dropdown-item class="create_row" command="center" v-if="pageType != 'enterprise'">
                <svg-icon icon-class="txt"></svg-icon>
                <span class="metaTitle">模板中心</span>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div>

      <slot v-else></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: "breadcrumb-navigation-doc",
  props: {
    pageType: {
      //enterprise:企业,team:团队,self:个人
      type: String,
      default: "",
    },
    treeNodeRow: {
      type: Object,
      default: () => {
        return {};
      },
    },
    breadList: {
      type: Array,
      default: () => {
        return [];
      },
    },
    // 新建按钮 true 存在
    isShowAdd: {
      type: Boolean,
      default: true,
    },
  },
  components: {},
  computed: {
    isAddDisabled() {
      if (this.pageType == "enterprise") {
        //企业
        return !this.$yuUtils.documentsPermissionFunc(
          ["add"],
          this.$store.state.enterpriseRole.enterpriseMyParentRoleList
        );
      } else if (this.pageType == "team") {
        //团队
        return !this.$yuUtils.documentsPermissionFunc(
          ["add"],
          this.$store.state.teamRole.myParentRoleList
        );
      } else {
        //个人
        return false;
      }
    },
  },
  data() {
    return {
      routerInfo: null,
    };
  },
  watch: {
    $route: {
      handler(to, from) {
        this.routerInfo = to;
      },

      deep: true, // 深度监听
      immediate: true, // 第一次初始化渲染就可以监听到
    },
  },
  mounted() { },
  methods: {
    /**面包屑点击事件 */
    breadRouterClick(item) {
      this.$emit("breadRouterClick", item);
    },
    createCommand(command) {
      // 新建文件夹
      if (command == "newFolder") {
        this.$parent.opendialogRename("craete");
      }
      //上传文件
      if (command == "file") {
        if (this.pageType == "self") {
          this.$parent.openPersonUpload();
        } else if (this.pageType == "team") {
          this.$parent.open_yuUploadDialog();
        } else if (this.pageType == "enterprise") {
          this.$parent.open_yuUploadDialog();
        }
      }
      //上传文件夹
      if (command == "folder") {
        this.$parent.openUploadFolder();
      }
      // 新建自定义文档
      if (
        command == "word" ||
        command == "excel" ||
        command == "ppt" ||
        command == "formDocument"
      ) {
        this.$parent.showDocumentDialog(command);
      }
      // if (command == "center") {
      //   this.$parent.showDocumentDialog(command);
      // }
    },

    //权限控制
    permissionDisabledFunc() {
      return false;
    },
  },
};
</script>
<style scoped lang="scss">
.now_page_title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 48px;
  padding: 0 20px;
  border-bottom: 1px solid #eee;

  .left_box {
    display: flex;
    align-items: center;
    color: #999;
    font-size: 15px;
  }

  .metaTitle {
    margin-left: 8px;
    color: #333;
  }

  .btn_box {
    display: flex;
    align-items: center;
  }

  .create_box {
    margin-right: 10px;

    ::v-deep .el-button--primary {
      background-color: #6698ff;
      border-color: #6698ff;
    }

    ::v-deep .el-button--primary:focus {
      box-shadow: 0 2px 5px 1px rgba(102, 152, 255, 0.6);
      background-color: #6698ff !important;
      border-color: #6698ff !important;
      color: #fff !important;
    }

    ::v-deep .el-button--primary:hover {
      box-shadow: 0 2px 5px 1px rgba(102, 152, 255, 0.6);
      background-color: #6698ff !important;
      border-color: #6698ff !important;
      color: #fff !important;
    }

    ::v-deep .el-button:focus,
    ::v-deep .el-button:hover {
      color: #6698ff;
      border-color: #6698ff;
      background-color: rgba(102, 152, 255, 0.1);
    }

    .el-button.is-disabled {
      color: #c0c4cc;
      cursor: not-allowed;
      background-image: none;
      background-color: #fff;
      border-color: #ebeef5;
    }

    .el-button--primary.is-disabled {
      color: #fff !important;
      background-color: #94b7fd !important;
      border-color: #94b7fd !important;

      &:hover {
        box-shadow: none !important;
      }
    }
  }

  .create_text {
    margin: 0 8px;
  }
}

.create_row {
  display: flex;
  align-items: center;
  color: #999;
  font-size: 16px;
  width: 220px;
  padding: 6px 16px !important;

  span {
    font-size: 14px;
    margin-left: 8px;
    color: #333 !important;
  }

  &:hover {
    background-color: #f5f5f5 !important;
    color: #999;
  }
}

.create_row_bottom {
  border-top: 1px solid #f5f5f5;
}

.breadcrumb_boxs {
  width: calc(100vw - 920px);
  display: flex;
  align-items: center;
  overflow: hidden;
  overflow-x: auto;
  white-space: nowrap;
  color: #999;

  .text_color {
    color: #333;
  }

  .icon_class {
    margin-left: 5px;
  }

  .breadcrumb_box_item {
    display: inline-block;
    vertical-align: middle;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 130px;
    cursor: pointer;

    &:hover {
      color: #409eff;
    }
  }
}
</style>
